<template>

  <router-view />
  <div class="da">
    <div class="box">
      <div class="header">
        <form action="/">
          <van-search v-model="value" show-action placeholder="请输入搜索关键词" />
        </form>
      </div>
      <div class="meddle">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="footer">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="./assets/1.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="./assets/2.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="./assets/5.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="./assets/ld.jpg" alt=""></van-swipe-item>
</van-swipe>
    </div>
    <div>
      <van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>
    </div>
    <div>
      <img src="./assets/9.png" alt="">
    </div>
    <div>
      <h3>手机专区</h3>
      <img src="./assets/8.png" alt="">
    </div>
  </div>
</template>
<script setup>

import { ref } from 'vue';
const active = ref(0);
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.da {
  width: 100%;
  height: 100%;
}

html,
body,
#app,
.da {
  display: flex;
  flex-direction: column;
}

.box {
  flex: 1;
  overflow: auto;
  flex-direction: column;
  display: flex;
}

.header {
  overflow: auto;
  display: flex;
}

.meddle {
  overflow: auto;
  display: flex;
  height: 6.25rem;
}

.footer {
  height: 3.125rem;
}
img{
  width: 100%;
  height: 6.25rem;
}

</style>
